<template>
  <div class="detail">
    <!-- 背景图 -->
    <img :src="bg" class="detail-bg" />
    <!-- 助力人数 -->
    <div class="number">
      当前助力
      <span>{{number}}</span> 人数
    </div>
    <!-- logo -->
    <img :src="logo" alt class="logo" />
    <!-- 规则 -->
    <img :src="notice" alt class="notice" />
    <!-- 领取框 -->
    <div class="progress-box">
      <img :src="progress" alt class="progress" />
      <img :src="[(number >3 && number <30) ? btnList[1] :btnList[0]]" alt class="btn" :class="[(number >3 && number <30) ? 'noban' :'ban']" @click="onSubmit" />
      <img :src="[(number >= 30 && number <80) ? btnList[1] :btnList[0]]" alt class="btn" :class="[(number >= 30 && number <80) ? 'noban' :'ban']" @click="onSubmit" />
      <img :src="[ number>=80 ? btnList[1] :btnList[0]]" alt class="btn" :class="[(number>=80) ? 'noban' :'ban']" @click="onSubmit" />
    </div>
    <img :src="banner" alt class="banner" />
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      bg:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/bg_1230.jpg",
      number: 33,
      logo:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/logo.png",
      notice:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/notice.png",
      progress:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/progress-0105.png",
      banner:
        "https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/banner.png",
      btnList:
       ["https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/prize-no.png","https://staging-statics.maiscrm.com/modules/danonecommon/wom/test/prize-ok.png"] 
    };
  },
  created () {
    // console.log(this.$route.params.number)
    this.number=this.$route.params.number || 33
  },
  methods :{
    onSubmit () {
        Dialog.confirm({
          title: "前往提交信息！",
          message: "是否前往"
        })
          .then(() => {
          this.$router.push({path :'/submit'})
          })
          .catch(() => {
            // on cancel
            this.$router.push({ name: "detail"});
          });
     
    }
  }
};
</script>

<style lang='less' scoped>
.detail {
  position: relative;
  width: 7.5rem;
  height: 15.04rem;

  .detail-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  .logo {
    position: absolute;
    width: 2.5rem;
    top: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .number {
    position: absolute;
    width: 60%;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.5rem;
    color: yellow;

    span {
      color: white;
    }
  }

  .notice {
    position: absolute;
    width: 6.86rem;
    top: 3.3rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .progress-box {
    position: relative;
    width: 6.86rem;
    height: 5.3726rem;
    top: 6.25rem;
    left: 50%;
    transform: translateX(-50%);

    .progress {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .btn {
      position: absolute;
      right: 0.3rem;
      width: 3.14rem;
      height: 1.2rem;
    }

    img:nth-of-type(2) {
      top: 0.95rem;
    }

    img:nth-of-type(3) {
      top: 2.25rem;
    }

    img:nth-of-type(4) {
      top: 3.75rem;
    }
  }

  .banner {
    position: absolute;
    width: 343px;
    top: 11.85rem;
    left: 50%;
    transform: translateX(-50%);
  }

  // 禁用点击事件样式
  .ban {
     pointer-events: none;
  }

  .noban {
    pointer-events: auto;
  }
}
</style>